import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import React, { useState, type ReactNode } from 'react';
// import routerList from '../../router';
import Login from '../../pages/login'
import Report from '../../pages/report'
import Report3 from '../../pages/report3'
import Report2 from '../../pages/report2'
// import Layout from '../pages/home/Layout'
import { useNavigate } from 'react-router-dom';
import './menu.css'

type MenuItem = Required<MenuProps>['items'][number];
function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
}
const routerList = [
    { path: "/login", element: <Login />, name: '123', code: '/login' },
    {
        path: "/reports", element: <div></div>, name: 'reports', code: '/reports',
        children: [
            {
                path: "/reports/report1", element: <Report />, name: 'report1', code: '/reports/report1'
            },
            {
                path: "/reports/report2", element: <Report2 />, name: 'report2', code: '/reports/report2',
            },
            {
                path: "/reports/report3", element: <Report3 />, name: 'report3', code: '/reports/report3',
            }
        ]
    },

]

function getDeep(options: any) {
    const list = options.map((item: any) => {
        return getItem(item.name, item.code, <MailOutlined />, item.children && getDeep(item.children))
    })
    return list
}

const items: MenuItem[] = getDeep(routerList)
console.log(items)
// submenu keys of first level
const rootSubmenuKeys = routerList.map(item => item.code);

const App: React.FC = () => {
    const navigation = useNavigate()
    const [openKeys, setOpenKeys] = useState(['']);

    const onOpenChange: MenuProps['onOpenChange'] = (keys: any) => {
        const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
            setOpenKeys(keys);

        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }

    };
    const onSelect: Function = (item: any) => {
        if (item.key.startsWith("/")) {
            //外部路由，直接导航
            navigation(item.key);
        } else
            //子路由，导航到根路径下的子路由
            navigation(`/${item.key}`);

    }
    return (
        <Menu
            mode="inline"
            openKeys={openKeys}
            onOpenChange={onOpenChange}
            onSelect={onSelect}
            //   style={{ width: 256 }}
            items={items}
        />
    );
};

export default App;